<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		<div id="app">
				
		</div>
		
		
		
		<script>
			
			
			//1.在 div 标签下创建 10 个li 标签 ，标签内容格式为，"第一个标签"、"第二个标签" ..."第十个标签"
			// dom 元素的创建
			
			 var div = document.getElementById("app")
			 var textArr = ['一','二','三','四','五','六','七','八','九','十'];
			 var lisState = []
			 for(var i = 0;i<textArr.length;i++){
				 
				 var  li = document.createElement("li");
				 li.innerText = "第"+textArr[i]+"个标签";    
				 div.appendChild(li); 
				 lisState.push(0)
			 }
			 
			 
			 console.log(lisState)
			
			//2. 点击任意 li 标签 ，弹窗 显示 标签li 上文本的内容。
			// 多个 或者批量操作 一定要想到循环，for 循环
		    
			// 获取所有的li 标签 
			
			//3. 点击任意li 标签，使用console.log 显示 "这是第n个标签" ,n 为 数字 1-10。
			
			
			// 定义 和li 长度 一样的数组来记录 li 的背景颜色是否为红色状态
				
		     var lis = document.querySelectorAll('li');
					 
		     for(var j = 0;j<lis.length;j++){
				
				var text = lis[j].innerText;
				console.log(text)
				
				var n = j+1;
				lis[j].content = "这是第"+n+"个标签";
				
				lis[j].n = j; 
				
				lis[j].onclick = function(e){
								   
				    //console.log("li",this,e)
					// 1. 使用this 
					//alert(this.innerText)
					
					// 2. 
			       console.log(this.content)
				   
				   // 3 . 怎么知道我点击的是不是奇数 
				   
				   if(this.n%2==0){
					   
					   if(lisState[this.n]==0){
					
						     this.style.backgroundColor = "red";
							 lisState[this.n] = 1;
					   }else{
						   
						   this.style.backgroundColor = "white";
						   lisState[this.n] = 0;
					   }
				
				   }
				   
				   
				   
				
				}
				 
				 
			 }
		
			 

			
			//4. 点击编号是奇数的背景颜色变为红色，如果已经是红色，则设置背景颜色为白色。
			
			// 对样式的操作
			
			
			
			
			
			
		</script>
		
		
	</body>
</html>